<template>
  <view class="Page2 InvitePeople">
        <view v-if="activity.is_reward===1">
            <cdn-img src="/static/img/InvitePeople/people.png" class='headImgs' /> 
        </view>
        <view v-if="activity.is_reward===0">
            <cdn-img src="/static/img/InvitePeople/no_people.png" class='headImgs' /> 
        </view>
        <view class="InviteData" v-if="activity.is_reward===1">
            <view class="number">
                <view class="text">邀请人数</view>
                <view><text class="toll">{{ invite.countInviter }}</text>人</view>
            </view>
            <view class="line"></view>
            <view class="money">
                <view class="text">邀请奖励</view>
                <view><text class="toll">{{ invite.sumMoney }}</text>元</view> 
            </view>
        </view>
        <!-- 推广按钮 -->
        <view class="btn" v-if="activity.is_reward===1"> 
            <view class=" bot_t ">
             <button class="txt friends" open-type="share">分享好友赢奖励</button>
             <cdn-img src="/static/img/InvitePeople/click.png" class='click' /> 
             </view>
            <view class=" bot_s ">
                <!-- <view class="txt posters " @click="goToSub('popularize/index')">生成推广海报</view> -->
                <button class="txt posters" @click="goToSub('popularize/index')">生成推广海报</button>
            </view>
        </view> 
        <!-- 限时活动 -->
        <view class="activity" v-if="activity.is_reward===1"> 
            <view class="title"><view class="left"></view> 限时活动 <view class="right"></view> </view>
            <view class="detail">
                <view class="shows"><text class="head">面向对象：</text>未认证快抖探店平台的用户</view>
                <view class="shows"><text class="head">活动说明：</text>{{ activity.explain }}</view>
            </view>      
        </view>
        <!-- 任务进度-->
        <view class="activity" v-if="activity.is_reward===1"> 
            <view class="title"><view class="left"></view> 任务进度 <view class="right"></view> </view>
            <view class="task" v-for="(item,index) in activity.award_rule" :key="item.id">
                <view class="task_left">
                    <cdn-img src="/static/img/InvitePeople/task.png" class="taskImg"/>
                    <view class="task_info">
                        <view>    
                            <text>阶段{{ index+1 }}</text>&emsp;
                            <!-- 需要完成的数量和奖励 -->
                            <text>{{ item.num }}人/{{ item.money }}元</text>&emsp;
                            <!-- 进度 2/5 -->
                            <!-- <text v-if="Progress[index]">({{Progress[index].num }}/{{ item.num }})</text> -->
                            <text v-if="Progress[index]">({{invite.countInviter}}/{{Progress[index].num }})</text>
                        </view>
                        <nut-progress v-if="Progress[index]" :percentage="invite.countInviter / Progress[index].num   * 100" :text-inside="true" stroke-color="linear-gradient(#728ef7 0%, #4667ec 100%)">
                            <img
                                src="/static/img/InvitePeople/circle.png"
                                class="circle"
                            /> 
                        </nut-progress>
                        <nut-progress v-else :percentage="0" :text-inside="true" stroke-color="linear-gradient(#728ef7 0%, #4667ec 100%)"> 
                            <img
                                src="/static/img/InvitePeople/circle.png"
                                class="circle"
                            /> 
                        </nut-progress>
                    </view>
                </view>
                <template v-if="Progress[index]">
                    <view v-if="Progress[index].is_seed === 1 && Progress[index].num === invite.countInviter" class="state fcenter" >已完成</view>
                    <view v-if="Progress[index].is_seed === 0 && Progress[index].num !== invite.countInviter" class="state_w fcenter">未完成</view>
                    <view v-if="Progress[index].num === invite.countInviter && Progress[index].is_seed ===0" class="state_w fcenter" @click="Receive(Progress[index].id)">领取奖励</view>
                </template>
                <view v-else class="state_w fcenter">未完成</view>
            </view>
        </view>
        <!-- 邀请记录 -->
        <Concern :class="[activity.is_reward===0?'Concern':'']"/>
        <!-- 奖励规则 -->
        <view class="activity" v-if="activity.is_reward===1"> 
            <view class="title"><view class="left"></view> 奖励规则 <view class="right"></view> </view>
            <view class="rules" v-for="(item,index) in activity.award_rule" :key="item.id">
                <view>
                <cdn-img src="/static/img/InvitePeople/round.png" class="round"/>
                <nut-divider direction="vertical" class="line"/>
                <view class="triangle"></view>
                </view>
                <view class="stage">
                    <view>阶段{{ index+1 }}</view>
                    <view>邀新{{ item.num }}人</view>
                    <view>奖励{{ item.money }}元</view>
                </view>
            </view>
        </view>
        <!-- 邀请攻略 -->
        <!-- <Strategy :class="[activity.is_reward===0?'star_strategy':'']"/> -->
        <view :class="[activity.is_reward===0?'star_strategy':'strategy_t']">
            <view class="activity">
                <view class="title"><view class="left"></view> 邀请攻略 <view class="right"></view> </view>
                <view class="strategy">
                    <view class="Code">
                        <view class="icon">
                            <cdn-img src="/static/img/strategy/code.png" class='code_t' /> 
                        </view>
                        <h2>生成推广码</h2>
                        <view class="msg">生成推广海报或直接分享 好友/群</view>

                    </view>
                    <cdn-img src="/static/img/strategy/left.png" class='left' /> 
                    <view class="Code">
                        <view class="icon">
                            <cdn-img src="/static/img/strategy/attestation.png" class='code_t' /> 
                        </view>
                        <h2>新用户认证</h2>
                        <view class="msg">新达人扫码进入平台授权完成首次认证</view>
                    </view>
                    <cdn-img v-if="activity.is_reward===1" src="/static/img/strategy/left.png" class='left' /> 
                    <view class="Code" v-if="activity.is_reward===1">
                        <view class="icon">
                            <cdn-img src="/static/img/strategy/reward.png" class='code_t' /> 
                        </view>
                        <h2>达标获奖励</h2>
                        <view class="msg">根据邀请人数获得阶梯达标奖励</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 推广按钮 -->
        <view class="btn" v-if="activity.is_reward===0" style="padding-bottom: 50px;"> 
            <view class=" bot_t ">
                <button class="txt friends" open-type="share">分享好友</button>
                <cdn-img src="/static/img/InvitePeople/click.png" class='click' /> 
             </view>
            <view class=" bot_s ">
                <!-- <view class="txt posters" @click="goToSub('popularize/index')">生成推广海报</view> -->
                <button class="txt posters" @click="goToSub('popularize/index')">生成推广海报</button>
            </view>
        </view> 
  </view>
</template>
<script>
import { reactive, ref, toRefs,defineEmits} from 'vue'
import { useUserStore, useConfigStore } from '@/stores'
import { useDidShow, useLoad, showToast } from '@tarojs/taro'
import Concern from '@/components/Concern.vue';
// import Strategy from '@/components/Strategy.vue';
import { navigateTo } from '@/router'
import "./index.scss";
import { getKey, getReceipt } from '@/api/index'
export default {
    components: {Concern,},
	setup() {
    const user = useUserStore()
    const invite =ref([])
    const activity =ref({})
    const state = { 1:'已完成', 2:'领取奖励' ,0:'未完成'}
    const Progress =ref([])
    const config = useConfigStore()
  
    const goToSub = (url) => {
            navigateTo({ url: '/pagesub/'+url })
    }
    useLoad(()=>{
        config.getInviteInfo().then(res=>{
            invite.value = res
            activity.value = res.inviterActivity
        })
    })
useDidShow(() => {
    getKey().then(res=>{
        Progress.value = res.data
    })
    // 开启分享
    wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline'],
    })
})

 
function Receive(id){
    getReceipt(id).then(res=>{
        if(res){
            showToast({title: res.data, icon: 'success', duration: 2000})
        }
        useDidShow()
    })
}
return {
    ...toRefs(state),
    config,
    user,
    invite,
    activity,
    Progress,
    goToSub,
    Receive,
		}
    },
    onShareAppMessage(res){
        const { share_title, share_img } =this.config.oemInfo
        return {
            title: share_title,
            path: `/pages/home/index?from_id=${this.user.info.id}`,
            imageUrl: share_img,
        }
    },
	onShareTimeline(){
        const { share_title, share_img } = this.config.oemInfo
        return {
            title: share_title,
            imageUrl: share_img,
            query: `from_id=${this.user.info.id}`
        }
	},
}


</script>

